<template>
    <div class="tag-manager">
      <h1>标签管理</h1>
  
      <!-- 表单：创建/更新标签 -->
      <el-form :model="newTag" label-width="80px">
        <el-form-item label="标签名称">
          <el-input v-model="newTag.name" @input="updateSlug"></el-input>
        </el-form-item>
        <el-form-item label="Slug">
          <el-input v-model="newTag.slug" readonly></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="createOrUpdateTag">{{ isUpdate ? '更新' : '创建' }}标签</el-button>
          <el-button v-if="isUpdate" @click="resetForm">取消更新</el-button>
        </el-form-item>
      </el-form>
  
      <!-- 标签列表 -->
      <el-table :data="tags" style="width: 100%">
        <el-table-column prop="id" label="ID" width="180"></el-table-column>
        <el-table-column prop="name" label="标签名称" width="180"></el-table-column>
        <el-table-column prop="slug" label="Slug" width="180"></el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button size="mini" @click="editTag(scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="deleteTag(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted, getCurrentInstance } from 'vue';
  import { ElMessage } from 'element-plus';
  import slugify  from 'slugify';
  
  // 获取当前组件实例
  const { proxy } = getCurrentInstance();
  
  // 常量
  const API_URL = '/api/tags'; // 标签管理 API 地址
  
  // 响应式变量
  const tags = ref([]); // 标签列表
  const newTag = ref({ id: null, name: '', slug: '' }); // 当前正在编辑或创建的标签
  const isUpdate = ref(false); // 是否处于更新模式
  
  // 初始化加载标签
  const fetchTags = async () => {
    try {
      const response = await proxy.$axios.get(API_URL);
      tags.value = response.data;
    } catch (error) {
      console.error('获取标签失败', error);
      ElMessage.error('获取标签失败，请稍后再试');
    }
  };
  
  // 创建或更新标签
  const createOrUpdateTag = async () => {
    try {
      if (isUpdate.value) {
        // 更新标签
        await proxy.$axios.put(`${API_URL}/${newTag.value.id}`, newTag.value);
        ElMessage.success('更新成功');
      } else {
        // 创建新标签
        await proxy.$axios.post(API_URL, newTag.value);
        ElMessage.success('创建成功');
      }
      resetForm();
      fetchTags();
    } catch (error) {
      console.error('操作失败', error);
      ElMessage.error(error.response?.data?.message || '操作失败，请稍后再试');
    }
  };
  
  // 编辑标签
  const editTag = (tag) => {
    newTag.value = { ...tag };
    isUpdate.value = true;
  };
  
  // 删除标签
  const deleteTag = async (id) => {
    try {
      await proxy.$axios.delete(`${API_URL}/${id}`);
      ElMessage.success('删除成功');
      fetchTags();
    } catch (error) {
      console.error('删除失败', error);
      ElMessage.error(error.response?.data?.message || '删除失败，请稍后再试');
    }
  };
  
  // 重置表单
  const resetForm = () => {
    newTag.value = { id: null, name: '', slug: '' };
    isUpdate.value = false;
  };
  
  // 更新 Slug
  const updateSlug = () => {
    console.log('updateSlug');
    newTag.value.slug = slugify(newTag.value.name, {
      lower: true,
      strict: true
    });
  };
  
  // 页面加载时获取所有标签
  onMounted(fetchTags);
  </script>
  
  <style scoped>
  .tag-manager {
    padding: 20px;
  }
  </style>